<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <!-- 新增角色按钮 -->
        <el-row style="height:60px">
          <el-button icon="el-icon-plus" size="small" type="primary" @click="addRoleDialog">新增角色</el-button>
        </el-row>
        <!-- 表格 -->
        <el-table :data="roleList">
          <el-table-column label="序号" width="120" type="index" />
          <el-table-column label="角色名称" width="240" prop="name" />
          <el-table-column label="描述" prop="description" />
          <el-table-column label="操作" width="240" fixed="right">
            <!-- 作用域插槽    scoped.row 结构后 {{row}} -->
            <template #default="{row}">
              <el-button size="small" @click="assignRole(row.id)">分配权限</el-button>
              <el-button size="small">编辑</el-button>
              <el-button size="small" type="danger" @click="fetchDelRole(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <el-row type="flex" justify="center" align="middle" style="height: 60px">
          <!-- 分页组件 -->
          <el-pagination layout="prev,pager,next" :total="total" :page-size="params.pagesize"
            :current-page="params.page" @current-change="pageChange" />
        </el-row>
      </el-card>
    </div>
    <!-- 新增弹框 -->
    <el-dialog title="编辑弹层" :visible="roleDialogVisible" @close="closeRoleDialog">
      <!-- 表单内容 -->
      <el-form ref="roleForm" :model="roleForm" :rules="rules" label-width="100px">
        <el-form-item label="角色名称" prop="name">
          <el-input v-model="roleForm.name" />
        </el-form-item>
        <el-form-item label="角色描述" prop="description">
          <el-input v-model="roleForm.description" />
        </el-form-item>
      </el-form>
      <!-- 底部 -->
      <el-row slot="footer" type="flex" justify="center">
        <el-button size="small" @click="cancel">取消</el-button>
        <el-button size="small" type="primary" @click="confirmAdd">确定</el-button>
      </el-row>
    </el-dialog>
    <!-- 分配角色权限弹框 -->
    <el-dialog class="assign-role" title="分配角色" :visible="showRoleDialog" @close="closeDialog">
      <!-- 权限点数据展示 -->
      <template #default>
        <el-tree ref="tree" :data="permissionData" :props="{ label: 'name' }" :default-expand-all="true"
          :show-checkbox="true" :check-strictly="true" node-key="id" />
      </template>
      <!-- 这里准备复选框 -->
      <template #footer>
        <el-button type="primary" size="small" @click="hAssignRoles">确定</el-button>
        <el-button size="small" @click="showRoleDialog=false">取消</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
  // 1. 组件库找到相应的基础布局
  // 2. 调用接口   获取角色列表 并传递给后台返回的参数信息
  //  接收返回的信息  赋值给data中定义的响应式数据
  // 3. 根据后台返回的数据格式  对表格进行渲染  绑定响应式属性
  // 4. 分页器组件
  // 5. 根据文档要求  进行相关配置
  import {
    getRoleList,
    deleteRole,
    addRole,
    assignPerm,
    getRoleDetailById
  } from '@/api/setting'
  import {
    getPermissionList
  } from '@/api/permission'
  import transTree from '@/utils/transTree'
  export default {
    name: 'VueAdminIndex',

    data() {
      return {
        roleList: [],
        // 控制加载状态
        loading: false,
        total: 0,
        roleDialogVisible: false,
        showRoleDialog: false,
        permissionData: [], //  添加权限弹框显示的数据
        curId: null,
        params: {
          page: 1,
          pagesize: 5
        },
        roleForm: {
          name: '',
          description: ''
        },
        rules: {
          name: [{
            required: true,
            message: '角色名称不能为空',
            trigger: 'blur'
          }],
          description: [{
            required: true,
            message: '角色描述不能为空',
            trigger: 'blur'
          }]
        }
      }
    },

    mounted() {
      this.fetchRoleList()
    },

    methods: {
      // 获取详情
      async fetchRoleList() {
        const res = await getRoleList(this.params)
        this.roleList = res.rows
        this.total = res.total
      },
      // 页面变化时触发
      pageChange(page) {
        // console.log(page)
        this.params.page = page
        this.fetchRoleList()
      },
      // 删除
      fetchDelRole(id) {
        this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          // 调用删除接口
          await deleteRole(id)
          // 重新渲染页面
          this.fetchRoleList()
          // 提示用户
          this.$message.success('删除成功')
        })
      },
      // 新增功能
      addRoleDialog() {
        // 打开弹框
        this.roleDialogVisible = true
      },
      // 关闭弹框
      closeRoleDialog() {
        this.roleDialogVisible = false
        this.$refs.roleForm.resetFields()
        this.roleForm = {
          name: '',
          description: ''
        }
      },
      // 确定添加
      confirmAdd() {
        // 表单校验
        this.$refs.roleForm.validate(async (valid) => {
          if (valid) {
            // 请求接口
            await addRole(this.roleForm)
            // 渲染页面.
            this.fetchRoleList()
            // 重置表单
            this.closeRoleDialog()
          }
        })
      },
      // 取消
      cancel() {
        this.closeRoleDialog()
      },
      // 关闭分配权限
      closeDialog() {
        this.showRoleDialog = false
        this.$refs.tree.setCheckedKeys([])
      },
      // 分配权限按钮
      async assignRole(id) {
        this.curId = id
        this.showRoleDialog = true
        // 弹窗打开   请求接口
        const res = await getPermissionList()
        this.permissionData = transTree(res)
        // 获取详情数据
        const detail = await getRoleDetailById(this.curId)
        // 拿到的数据回显可选列表中
        this.$refs.tree.setCheckedKeys(detail.permIds)
      },
      // 确定按钮
      hAssignRoles() {
        assignPerm({
          id: this.curId,
          // 二级菜单  id
          permIds: this.$refs.tree.getCheckedKeys()
        })
        // 提示用户
        this.$message.success('分配权限点成功')
        // 关闭弹框
        this.closeDialog()
      }
    }
  }

</script>

<style lang="scss" scoped>

</style>
